.x {
	&-overflow-hidden {
		overflow: hidden !important;
	}

	&-popup {
		position: fixed;
		max-height: 100%;
		overflow-y: auto;
		background-color: $popup-background-color;
		transition: $popup-transition;
		-webkit-overflow-scrolling: touch;
		z-index: 2000;
		perspective: 800px;
		pointer-events: none;

		&--show {
			pointer-events: auto;
		}

		&--center {
			top: 50%;
			left: 50%;
			transform: translate3d(-50%, -50%, 0) scale(0.7);
			opacity: 0;

			&.x-popup--show {
				transform: translate3d(-50%, -50%, 0) scale(1);
				opacity: 1;
			}

			&.x-popup--round {
				border-radius: $popup-round-border-radius;
			}
		}

		&--top {
			top: 0;
			left: 0;
			width: 100%;
			transform: translate3d(0, -100%, 0);

			&.x-popup--show {
				transform: translate3d(0, 0, 0);
			}

			&.x-popup--round {
				border-radius: 0 0 $popup-round-border-radius $popup-round-border-radius;
			}
		}

		&--right {
			top: 50%;
			right: 0;
			transform: translate3d(100%, -50%, 0);

			&.x-popup--show {
				transform: translate3d(0, -50%, 0);
			}

			&.x-popup--round {
				border-radius: $popup-round-border-radius 0 0 $popup-round-border-radius;
			}
		}

		&--bottom {
			bottom: 0;
			left: 0;
			width: 100%;
			transform: translate3d(0, 100%, 0);

			&.x-popup--show {
				transform: translate3d(0, 0, 0);
			}

			&.x-popup--round {
				border-radius: $popup-round-border-radius $popup-round-border-radius 0 0;
			}
		}

		&--left {
			top: 50%;
			left: 0;
			transform: translate3d(-100%, -50%, 0);

			&.x-popup--show {
				transform: translate3d(0, -50%, 0);
			}

			&.x-popup--round {
				border-radius: 0 $popup-round-border-radius $popup-round-border-radius 0;
			}
		}

		&--safe-area-inset-bottom {
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
		}

		&-slide-top-enter,
		&-slide-top-leave-active {
			transform: translate3d(0, -100%, 0);
		}

		&-slide-right-enter,
		&-slide-right-leave-active {
			transform: translate3d(100%, -50%, 0);
		}

		&-slide-bottom-enter,
		&-slide-bottom-leave-active {
			transform: translate3d(0, 100%, 0);
		}

		&-slide-left-enter,
		&-slide-left-leave-active {
			transform: translate3d(-100%, -50%, 0);
		}

		&__close-icon {
			position: absolute;
			z-index: $popup-close-icon-z-index;
			color: $popup-close-icon-color;
			font-size: $popup-close-icon-size;
			cursor: pointer;

			&:active {
				opacity: $active-opacity;
			}

			&--top-left {
				top: $popup-close-icon-margin;
				left: $popup-close-icon-margin;
			}

			&--top-right {
				top: $popup-close-icon-margin;
				right: $popup-close-icon-margin;
			}

			&--bottom-left {
				bottom: $popup-close-icon-margin;
				left: $popup-close-icon-margin;
			}

			&--bottom-right {
				right: $popup-close-icon-margin;
				bottom: $popup-close-icon-margin;
			}
		}
	}
}
